
<template>
  <ContentWrap>
    <!-- 基本信息 -->
    <h3 style="margin-top: 20px;" >基本信息</h3>

    <table style="width: 100%;margin-top: 20px;" class="gridtable spanFont">
        <tr>
            <th>项目名称</th>
            <td colspan="3">
                <el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.project"/>
            </td>
        </tr>
        <tr>
            <th>项目地点（具体地址）</th>
            <td colspan="3">
                <el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.address"/>
            </td>
        </tr>
        <tr>
            <th style="width: 15%;">屋顶组件安装形式</th>
            <td style="width: 30%;">
                <el-radio-group v-model="localProduct.roofType">
                    <el-radio value="1">单坡斜屋顶挂钩</el-radio>
                    <el-radio value="2">双坡斜屋顶挂钩</el-radio>
                    <el-radio value="3">单坡斜屋顶牛腿</el-radio>
                    <el-radio value="4">双坡斜屋顶牛腿</el-radio>
                    <el-radio value="5">平屋顶阳光棚</el-radio>
                </el-radio-group>
            </td>
            <th style="width: 15%;">房屋偏向</th>
            <td style="width: 30%;">
                <el-radio-group v-model="localProduct.houseOrientation">
                    <el-radio value="1">南偏东</el-radio>
                    <el-input class="no-border-input underline-input"  v-model="localProduct.houseOrientation"/>°、
                    <el-radio value="2" style="margin-left: 20px;">南偏西</el-radio>
                    <el-input class="no-border-input underline-input"  v-model="localProduct.houseOrientation"/>°、
                    <el-radio value="3" style="margin-left: 20px;">正南</el-radio>
                </el-radio-group>
            </td>   
        </tr>
        <tr>
            <th>房屋类型</th>
            <td>
                <el-radio-group v-model="localProduct.houseType">
                    <el-radio value="1">别墅</el-radio>
                    <el-radio value="2">民宿酒店</el-radio>
                    <el-radio value="3">普通农民房</el-radio>
                    <el-radio value="4">单门独院</el-radio>
                    <el-radio value="5">一栋多户</el-radio>
                    <el-radio value="6">其它</el-radio>
                </el-radio-group>
            </td>
            <th>房屋高度</th>
            <td>
                <span>层数</span><el-input class="no-border-input underline-input"  v-model="localProduct.floors"/><span>层、</span>
                <span>总高（米）</span><el-input class="no-border-input underline-input" v-model="localProduct.totalHeight"/><span>米</span>
            </td>
        </tr>
        <tr>
            <th>组件数量</th>
            <td>
                <span>斜屋顶</span><el-input class="no-border-input underline-input" v-model="localProduct.roofCount.roof"/><span>块、</span>
                <span>平屋顶</span><el-input class="no-border-input underline-input" v-model="localProduct.roofCount.flat"/><span>块、</span>
                <span>地面</span><el-input class="no-border-input underline-input" v-model="localProduct.roofCount.ground"/><span>块、</span>
                <br/>
                <span>其它</span><el-input class="no-border-input underline-input" v-model="localProduct.roofCount.other"/><span>块</span>
            </td>
            <th>屋面漏水情况</th>
            <td>
                <el-radio-group v-model="localProduct.leak">
                    <el-radio value="1">有</el-radio>
                    <el-radio value="0">无</el-radio>
                </el-radio-group>
                <span style="margin-left: 20px;">具体情况</span><el-input class="no-border-input underline-input" style="width: 50%;" v-model="localProduct.floors"/>
            </td>
        </tr>    
        <tr>
            <th>房屋建造时间</th>
            <td>
                <el-input class="no-border-input underline-input" style="width: 20%;" v-model="localProduct.builtYear"/><span>年</span>
            </td>
            <th>房屋结构安全性复核</th>
            <td>
                <el-radio-group v-model="localProduct.safetyCheck">
                    <el-radio value="1">满足要求</el-radio>
                    <el-radio value="0">不满足要求</el-radio>
                </el-radio-group>
            </td>
        </tr>   
        <tr>
            <th>地理位置</th>
            <td>
                <span>北纬</span><el-input class="no-border-input underline-input" style="width: 15%;" v-model="localProduct.latitude.degree"/><span>°</span>
                <el-input class="no-border-input underline-input" style="width: 15%;" v-model="localProduct.latitude.minute"/><span>'</span>
                <el-input class="no-border-input underline-input" style="width: 15%;" v-model="localProduct.latitude.minute"/><span>''、</span>
                <br/>
                <span>东经</span><el-input class="no-border-input underline-input" v-model="localProduct.longitude.degree"/><span>°</span>
                <el-input class="no-border-input underline-input" style="width: 15%;" v-model="localProduct.longitude.minute"/><span>'</span>
                <el-input class="no-border-input underline-input" style="width: 15%;" v-model="localProduct.longitude.minute"/><span>''、</span>
                <el-input class="no-border-input underline-input" style="margin-left: 20px;" v-model="localProduct.altitude"/><span>海拔（米）</span>
            </td>
            <th>房屋结构安全性复核</th>
            <td>
                <el-radio-group v-model="localProduct.safetyCheck">
                    <el-radio value="1">满足要求</el-radio>
                    <el-radio value="0">不满足要求</el-radio>
                </el-radio-group>
            </td>
        </tr> 
        <tr>
            <th>上至屋顶的通道</th>
            <td>
                <el-radio-group v-model="localProduct.leak">
                    <el-radio value="1">阳台</el-radio>
                    <el-radio value="2">孔洞</el-radio>
                    <el-radio value="3">楼梯间</el-radio>
                    <el-radio value="4">其它<el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.leakDetails"/></el-radio>
                </el-radio-group>
            </td>
            <th>周围是否有污染型企业</th>
            <td>
                <el-radio-group v-model="localProduct.leak">
                    <el-radio value="1">是</el-radio>
                    <el-radio value="0">否</el-radio>
                </el-radio-group>
                <span style="margin-left: 15px;">污染类型</span><el-input class="no-border-input underline-input" style="width: 35%;" v-model="localProduct.leakDetails"/>
                <span style="margin-left: 15px;">距离</span><el-input class="no-border-input underline-input" style="width: 10%;" v-model="localProduct.leakDetails"/>
            </td>
        </tr> 
        <tr>
            <th>周边遮挡物</th>
            <td>
                <el-radio-group v-model="localProduct.leak">
                    <el-radio value="1">高树</el-radio>
                    <el-radio value="2">建筑物</el-radio>
                    <el-radio value="3">电线杆</el-radio>
                    <el-radio value="4">其他<el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.leakDetails"/></el-radio>
                </el-radio-group>
            </td>
            <th>房屋周边地质情况</th>
            <td>
                <span>房屋是否处于土地松软的山体区域</span>
                <el-radio-group v-model="localProduct.leak" style="margin-left: 20px;">
                    <el-radio value="1">是</el-radio>
                    <el-radio value="0">否</el-radio>
                </el-radio-group>
            </td>
        </tr>   
         <tr>
            <th>屋面遮挡物</th>
            <td>
                <el-radio-group v-model="localProduct.leak">
                    <el-radio value="1">女儿墙</el-radio>
                    <el-radio value="2">热水器</el-radio>
                    <el-radio value="3">烟囱</el-radio>
                    <el-radio value="4">老虎窗</el-radio>
                    <el-radio value="5">水箱</el-radio>
                    <el-radio value="6">其他<el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.leakDetails"/></el-radio>
                </el-radio-group>
            </td>
            <th>别墅区物业安装要求</th>
            <td>
                <el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.leakDetails"/>
            </td>
        </tr>   
         <tr>
            <th>用电负荷数据</th>
            <td>
                <span>提供电费单、负荷曲线(日、月、年)、家中用电设备类型及数量、年用电量</span>
            </td>
            <th>用电功率峰值</th>
            <td>
                <el-input class="no-border-input underline-input" style="width: 10%;" v-model="localProduct.leakDetails"/><span>KW</span>
            </td>
        </tr>   
         <tr>
            <th>项目所在地电网营业厅名称</th>
            <td>
                <el-input class="no-border-input underline-input" style="width: 100%;" v-model="localProduct.leakDetails"/>
            </td>
            <th>电网联系人及电话</th>
            <td>
                <span>联系人</span><el-input class="no-border-input underline-input" style="width: 35%;" v-model="localProduct.leakDetails"/>
                <span style="margin-left: 15px;">电话</span><el-input class="no-border-input underline-input" style="width: 35%;" v-model="localProduct.leakDetails"/>
            </td>
        </tr>  
    </table>
  </ContentWrap>
</template>
<script setup lang="ts">

import * as ExplorationApi from '@/api/crm/exploration'
import { ref, watch, toRefs } from 'vue'

const size='small';
const rules= {
          name: [
					{required: true, message: '请输入户主姓名', trigger: 'blur'},
						],
        }



const props = defineProps<{
  product: ExplorationApi.ExplorationVO;
}>();
const { product } = toRefs(props);
const localProduct = ref<ExplorationApi.ExplorationVO>({ ...product.value });
watch(
  product,
  (newVal) => {
    localProduct.value = { ...newVal };
  },
  { deep: true } // 深度监听对象内部变化
);
// 5. 定义事件，向父组件传递修改后的数据
const emit = defineEmits<{
  (e: 'update:product', value: ExplorationApi.ExplorationVO): void;
}>();


// 展示的折叠面板
const activeNames = ref(['basicInfo'])
</script>
